<template>
  <div>
    <div class="header">
      <el-dropdown @command="handleCommand">
        <div class="el-dropdown-link">
          {{this.isActive(value,"projectName")}}
          <img src="../../assets/images/cut.png" alt="" class="cut">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in group"
            :key="item.id"
            :command="item.id">
            {{item.projectName}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="content">
      <div class="search">
        <el-form :inline="true" :model="formInline" size="small" label-width="70px">
          <el-form-item label="设备编号">
            <el-input v-model="formInline.code" placeholder="请输入设备编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-select v-model="formInline.name" filterable clearable placeholder="请选择设备名称">
              <el-option
                v-for="item in formInline.device"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.version }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="formInline.type" filterable clearable placeholder="请选择设备类型">
              <el-option
                v-for="item in formInline.typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-select v-model="formInline.version" filterable clearable placeholder="请选择设备型号">
              <el-option
                v-for="item in formInline.device"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.version }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分支">
            <el-select v-model="formInline.branch" filterable clearable placeholder="请选择所属分支">
              <el-option
                v-for="item in formInline.group"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="formInline.status" filterable clearable placeholder="请选择设备状态">
              <el-option
                v-for="item in formInline.statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">确认搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <div class="thead">
          <div class="tr">
            <div class="th">序号</div>
            <div class="th">设备信息</div>
            <div class="th">设备监控信息</div>
            <div class="th">7天内报警次数</div>
            <div class="th">设备状态</div>
            <div class="th">操作</div>
          </div>
        </div>
        <div class="tbody">
          <div class="tr" v-for="item in tableData" :key="item.id">
            <div class="td">{{item.id}}</div>
            <div class="td">
              <viewer>
                <!--<viewer :image="image"> 绑定数组就是多张图片预览-->
                <img :src="item.img" alt="" :onerror="errImg" title="查看高清图片" class="img">
              </viewer>
            </div>
            <div class="td">查看详情</div>
            <div class="td">{{item.warning}}</div>
            <div class="td">
              <span
                :class="item.status===1?'normal':(item.status===2?'maintain':(item.status===3?'warning':(item.status===4?'upkeep':'offline')))"
                class="status">
                {{item.status===1?'正常运行':(item.status===2?'设备维修':(item.status===3?'设备告警':(item.status===4?'设备保养':'设备离线')))}}
              </span>
            </div>
            <div class="td"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getProject} from '../../utils/api';

  export default {
    name: "RealTime",
    data() {
      return {
        errImg: 'this.src="' + require('../../assets/images/chest.png') + '"',
        group: [],
        value: "",
        formInline: {
          code: "",//设备编号
          name: "",//设备名称
          version: '',//设备型号
          device: [
            {name: '小姐姐一号', id: 1, version: 'JD3321'},
            {name: '小姐姐二号', id: 2, version: 'JD3322'},
            {name: '小姐姐三号', id: 3, version: 'JD3323'},
          ],//设备列表
          type: '',//设备类型
          typeList: [
            {name: '签到机', id: 1},
            {name: '门禁闸机', id: 2}
          ],//设备类型列表
          branch: '',//所属分支
          group: [
            {name: '阿波罗一号组', id: 1},
            {name: '阿波罗二号组', id: 2},
            {name: '阿波罗三号组', id: 3},
          ],//所属分支列表
          status: '',//设备状态
          statusList: [
            {name: '正常运行', id: 1},
            {name: '设备维修', id: 2},
            {name: '设备告警', id: 3},
            {name: '设备保养', id: 4},
            {name: '设备离线', id: 5},
          ],//设备状态列表
        },
        tableData: [
          {
            id: 1,
            img: require("../../assets/images/chest.png"),
            code: 'JD3321',
            name: '别摸我制冷柜',
            type: '制冷',
            version: 'RH-361L',
            branch: '阿波罗一号项目 / 阿波罗一号组 / 阿波罗一号门店',
            status: 4,
            warning: 1
          },
          {
            id: 2,
            img: require("../../assets/images/chest.png"),
            code: 'JD3321',
            name: '别摸我制冷柜',
            type: '制冷',
            version: 'RH-361L',
            branch: '阿波罗一号项目 / 阿波罗一号组 / 阿波罗一号门店',
            status: 2,
            warning: 0
          },
          {
            id: 3,
            img: require("../../assets/images/chest.png"),
            code: 'JD3321',
            name: '别摸我制冷柜',
            type: '制冷',
            version: 'RH-361L',
            branch: '阿波罗一号项目 / 阿波罗一号组 / 阿波罗一号门店',
            status: 1,
            warning: 5
          },
          {
            id: 4,
            img: require("../../assets/images/chest.png"),
            code: 'JD3321',
            name: '别摸我制冷柜',
            type: '制冷',
            version: 'RH-361L',
            branch: '阿波罗一号项目 / 阿波罗一号组 / 阿波罗一号门店',
            status: 5,
            warning: 3
          },
          {
            id: 5,
            img: require("../../assets/images/chest.png"),
            code: 'JD3321',
            name: '别摸我制冷柜',
            type: '制冷',
            version: 'RH-361L',
            branch: '阿波罗一号项目 / 阿波罗一号组 / 阿波罗一号门店',
            status: 3,
            warning: 2
          },
        ],
      }
    },
    created() {
      this.getProject();
    },
    methods: {
      getProject() {
        this.postRequest(getProject, {})
          .then(res => {
            if (res.code === 200) {
              this.group = res.data;
              if (res.data.length > 0) {
                this.value = res.data[0].id
              }
              else {
                this.value = "";
              }
            }
            else {
              this.group = [];
              this.value = "";
            }
          })
      },
      handleCommand(command) {
        this.value = command;
      },
      isActive(id,key) {
        const index = this.group.map(v => v.id).indexOf(id);
        if (index > -1) {
          return this.group[index][key];
        }
        else {
          return "";
        }
      },
      search() {
      },
      getSelect(){

      },
    },
  }
</script>

<style scoped>
  .header {
    padding: 20px 30px;
    border-bottom: 1px solid #EAEDF3;
    box-sizing: border-box;
  }

  .content {
    padding: 30px;
    box-sizing: border-box;
  }

  .search {
    border: 1px solid #EAEDF3;
    padding: 20px 25px 2px 25px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(62, 63, 66, 1);
    cursor: pointer;
  }

  .cut {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: block;
  }

  .table {
    margin-top: 30px;
  }

  .thead {
    width: 100%;
    height: 60px;
    background: rgba(245, 245, 246, 1);
    border-radius: 4px;
  }

  .tbody > .tr {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(234, 237, 243, 1);
    padding: 30px 0;
    border-radius: 4px;
    margin-top: 30px;
    box-sizing: border-box;
  }

  .tr {
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
  }

  .img {
    width: 90px;
    height: 140px;
    display: block;
  }

  .th {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 60px;
    color: rgba(158, 160, 165, 1);
  }

  .td {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(62, 63, 66, 1);
  }

  .th:nth-of-type(1), .td:nth-of-type(1) {
    width: 90px;
  }

  .td:nth-of-type(1) {
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-right: 1px solid #EAEDF3;
  }

  .th:nth-of-type(2), .td:nth-of-type(2) {
    width: calc(45% - 90px);
  }

  .th:nth-of-type(3), .td:nth-of-type(3), .th:nth-of-type(4), .td:nth-of-type(4), .th:nth-of-type(5), .td:nth-of-type(5) {
    /*width: 150px;*/
    width: 12%;
  }

  .td:nth-of-type(3) {
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-left: 1px solid #EAEDF3;
    color: #0077F8;
    cursor: pointer;
  }

  .td:nth-of-type(4), .td:nth-of-type(5) {
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-left: 1px solid #EAEDF3;
  }

  .td:nth-of-type(5) {
    border-right: 1px solid #EAEDF3;
  }

  .th:nth-of-type(6), .td:nth-of-type(6) {
    /*width: 280px;*/
    width: 19%;
  }

  .status {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(52, 170, 68, 1);
    border-radius: 4px;
    box-sizing: border-box;
    color: #34AA44;
  }

  /*正常*/
  .normal {
    color: #34AA44;
    border-color: #34AA44;
  }

  /*告警*/
  .warning {
    color: #E6492D;
    border-color: #E6492D;
  }

  /*维修*/
  .maintain {
    color: #0077F8;
    border-color: #0077F8;
  }

  /*保养*/
  .upkeep {
    color: #FFB300;
    border-color: #FFB300;
  }

  /*离线*/
  .offline {
    color: #9EA0A5;
    border-color: #9EA0A5;
  }
</style>
